<script setup>
import { ref, onMounted, onUnmounted, nextTick  } from 'vue';
import {stuDegreeDataApi,stuClazzDataApi} from '@/api/report';
import * as echarts from 'echarts';

const stuClazzDOM = ref();
const stuDegreeDOM = ref();
let chartInstance = null;

//学生班级初始化条形图
const stuClazzInitEcharts =async () => {
  const result=await stuClazzDataApi();

  if (result.code) {
    chartInstance = echarts.init(stuClazzDOM.value);
    const option = {
      title: {
      text: '班级人数统计',
      left: 'center',
      //字体加粗
      textStyle: {
        fontWeight: 'bold',
        fontSize: 20 
      }
    },
      xAxis: {
        data: result.data.clazzList,
        //坐标轴加宽
        axisLabel:{
          interval:0,
          rotate:45,
          fontSize: 10 
        }
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: result.data.dataList
        }
      ],
      //光标放入显示数据
      tooltip: {
          trigger: 'item'
        }
    };
  chartInstance.setOption(option); 
    
  }
  
}



//学生学位初始化饼状图
const stuDegreeInitEcharts =async () => {
 const result=await stuDegreeDataApi();
//遍历result.data，将数据放入stuDegreeList，当name=1时，name=初中，name=2时，name=高中，name=3时，name=大专，name=4时，name=本科，name=5时，name=硕士，name=7时，name=其他

 for (let i = 0; i < result.data.length; i++) {
  if (result.data[i].name == 1) {
    result.data[i].name = '初中';  
  } else if (result.data[i].name == 2) {
    result.data[i].name = '高中'; 
  }
  else if (result.data[i].name == 3) {
    result.data[i].name = '大专';
  }
  else if (result.data[i].name == 4) {
    result.data[i].name = '本科';
  }
  else if (result.data[i].name == 5) {
    result.data[i].name = '硕士';
  }
  else if (result.data[i].name == 7) {
    result.data[i].name = '其他'; 
  }
 }

 if (result.code) {
  chartInstance = echarts.init(stuDegreeDOM.value);
   const option ={
    title: {
      text: '学员学历统计',
      left: 'center',
      //字体加粗
      textStyle: {
        fontWeight: 'bold',
        fontSize: 20 
      }
    },
      legend: {
        orient: 'vertical',
       //位置放在底部
       bottom: 'bottom',
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          radius: ["40%", "75%"] ,// 这个属性修改圆环宽度
          
          labelLine: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          data: result.data
        }
      ],
      



       //光标放入显示数据
       tooltip: {
          trigger: 'item'
        }
  }; 
  chartInstance.setOption(option); 
 }

   
}

  onMounted(() => {
    stuClazzInitEcharts();
    stuDegreeInitEcharts();
    });
</script>

<template>
  <div class="container" style="width: 100%; height: 100%; ">
    <div style="width: 50%; float: left; ">
      <div ref="stuClazzDOM" style="width: 500px; height: 650px;  "></div>
    </div>
    <div style="width: 50%; float: right; ">
      <div ref="stuDegreeDOM" style="width: 500px; height: 500px;  "></div>
    </div>
  </div>
</template>

<style scoped>

</style>